<script setup>

import CaseGrid from "@/components/CaseGrid.vue";
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import CasePopup from "@/views/case-details/CasePopup.vue";
import {cases} from "@/views/case-details/mockCase.ts";
import {allCases} from "@/assets/js/all-case.ts";

const category = ['所有', '品牌出海全案', '品牌策划设计', '新媒体运营及活动策划']
const state = ref({
  current: 0,
  data: allCases,
  curCase: {},
  showCasePopup: false,
})
const changeTab = (i) => {
  state.value.current = i
  if (i === 0) {
    state.value.data = allCases
  } else {
    state.value.data = allCases.filter(item => item.category === category[i])
  }
}
onMounted(() => {
  window.addEventListener('popstate', handlePopState);
  watch(() => state.value.showCasePopup, (newVal) => {
    document.body.style.overflow = newVal ? 'hidden' : '';
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('popstate', handlePopState);
});
const handlePopState = (event) => {
  if (state.value.showCasePopup) {
    state.value.showCasePopup = false;
    document.body.style.overflow = '';
  }
};
const showCasePopup = (caseId) => {
  state.value.curCase = cases.find(it => it.caseId === caseId);
  state.value.showCasePopup = true;
}
</script>

<template>
  <view class="seg1 container">
    <span class="font140 inter top25 bottomIn d3s">CASE</span>
    <span class="font140 inter top-2 bottomIn d3s">INTRODUCTION</span>
    <view class="font60 top6 bottomIn d3s">案例介绍</view>
  </view>
  <view class="seg2 container row">
    <view>案例展示</view>
    <view class="row" style="width: 50%; justify-content: flex-end;">
      <view class="item" v-for="(u,i) in category" :key="i" @click="changeTab(i)"
            :class="{active:state.current===i}">{{ u }}
      </view>
    </view>
  </view>
  <CaseGrid :data="state.data" @onItemClick="showCasePopup"/>
  <CasePopup :show="state.showCasePopup" :article="state.curCase" @onClose="state.showCasePopup = false"/>
</template>

<style scoped>
.seg1.container {
  height: calc(100vw * (1024 / 1920));
  justify-content: center;
  padding-bottom: 9%;
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_case_banner.png");
}

.seg2.container {
  height: calc(100vw * 160 / 1920);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 2%;

  .item {
    color: #979797;
    margin-left: 4%;
    cursor: pointer;

    &.active {
      color: white;
    }
  }
}
</style>